<template>
  <div>
    <el-card>
      <!-- 头部警示 -->
      <el-alert title="注意!只允许为第三级分类设置!" type="warning" show-icon :closable="false"></el-alert>

      <el-row style="margin:20px 0px;">
        <el-col>
          <span style="margin-right:10px;">选择商品分类:</span>
          <!-- 级联 -->
          <el-cascader
            v-model="selecedtKeys"
            :options="cateList"
            expand-trigger="hover"
            :props="propsConfig"
            @change="handleChange"
            clearable
          ></el-cascader>
        </el-col>
      </el-row>

      <!-- 选择 -->
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="动态参数" name="many">
          <TrendParams :disabled="isBtnDisabled" :params="params"></TrendParams>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="only">
          <StaticParams :disabled="isBtnDisabled" :params="params"></StaticParams>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import StaticParams from './component/StaticParams'
import TrendParams from './component/TrendParams'
export default {
  data() {
    return {
      activeName: 'many',
      cateList: [],
      selecedtKeys: [],
      propsConfig: {
        label: 'cat_name',
        value: 'cat_id',
        children: 'children'
      }
    }
  },
  methods: {
    async getCateList() {
      const { data: res } = await this.$http.get('categories')
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.cateList = res.data
      console.log(this.cateList)
    },
    handleChange() {
      if (this.selecedtKeys.length !== 3) {
        this.selecedtKeys = []
      }
      console.log(this.selecedtKeys)
    },
    handleClick() {
      //   console.log(this.activeName)
    }
  },
  created() {
    this.getCateList()
  },
  components: {
    StaticParams,
    TrendParams
  },
  computed: {
    isBtnDisabled() {
      if (this.selecedtKeys.length === 0) {
        return true
      }
      return false
    },
    params() {
      let obj = {
        id: 0,
        sel: 'many'
      }
      if (this.selecedtKeys.length !== 3) return obj
      obj['id'] = this.selecedtKeys[2]
      obj['sel'] = this.activeName
      return obj
    }
  }
}
</script>

<style lang="less" scoped>
</style>